﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer Blog - 后台管理系统</title> 
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/resource/js/editor.md-master/css/editormd.css" rel="stylesheet" type="text/css"/>
    <link href="/resource/js/tagit/jquery.tagit.css" rel="stylesheet" type="text/css"/>
    <link href="/resource/js/tagit/tagit.ui-zendesk.css" rel="stylesheet" type="text/css"/>
</head>

<body>
	<div class="row">
	    <div class="col-md-12">
	    	<h1 class="panel-heading">添加页面</h1>
	        <!--breadcrumbs start -->
	        <ul class="breadcrumb">
	            <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
	            <li><a href="#">Dashboard</a></li>
	            <li class="active">Current page</li>
	        </ul>
	        <!--breadcrumbs end -->
	    </div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<section class="panel">
				<div class="panel-body">
					<form class="col s12" id="form1" th:action="@{/admin/pages/add}" onsubmit="return validateForm();" method="post">
						<input name="defaultEditor" id="defaultEditor" type="hidden" value="md" />
						<input name="mdContent" id="mdContent" type="hidden" />
						<input name="htmlContent" id="htmlContent" type="hidden" />
						<input name="imagePath" id="filepath" type="hidden">
						<div class="form-group form-control-medium">
							<label for="pageName">页面标题：</label>
							<input id="pageName" name="pageName" type="text" class="form-control">
						</div>
						<div class="form-group form-control-small">
                            <label for="pageUrl">页面访问路径：</label>
                            <input id="pageUrl" name="pageUrl" type="text" class="form-control">
						</div>
						<div class="form-group form-control-small">
                            <label for="pageTemp">页面模版文件：</label>
                            <input id="pageTemp" name="pageTemp" type="text" class="form-control">
						</div>
						<div class="form-group">
							<label>显示/隐藏：</label>
							<div class="checkbox-inline">
                                <label>
                                    <input type="radio" name="status" id="show" value="1" checked="">显示
                                </label>
                            </div>
                            <div class="checkbox-inline">
                                <label>
                                    <input type="radio" name="status" id="hide" value="0">隐藏
                                </label>
                            </div>
						</div>
						<div class="form-group">
							<label>内容：<a href="javascript:void(0);" class="btn btn-xs btn-success" onclick="changeEdit();">切换为富文本编辑器</a></label>
							<div class="mdeditor">
								<div id="md-editormd"></div>
							</div>
							<div class="ueeditor" style="display:none;">
								<script id="ue-editor" type="text/plain" style="width:100%;height:320px;"></script>
							</div>
						</div>
						<div class="form-btn-group-left">
			            	<button type="submit" class="btn btn-info">保存</button>
			            </div>
					</form>
				</div>
			</section>
		</div>
	</div>
	<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
    <script src="/resource/js/editor.md-master/editormd.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/resource/js/ueditor-1.4.3.3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/resource/js/ueditor-1.4.3.3/ueditor.all.min.js"></script>
    <script src="/resource/js/tagit/jquery-ui.min.js"></script>
    <script src="/resource/js/tagit/tag-it.js"></script>
    
    <script type="text/javascript">
    	var defaultEditor = "md";
	    var mdEditor,ueEditor;
        
	    $(document).ready(function () {
	    	//初始化MD编辑器
	    	mdEditor = editormd("md-editormd", {
                width: "100%",
                height: 350,
                path : '/resource/js/editor.md-master/lib/',
                markdown : null,
                codeFold : true,
                saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                searchReplace : true,
                //watch : false,                // 关闭实时预览
                htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
                emoji : true,
                taskList : true,
                tocm            : true,         // Using [TOCM]
                tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart : true,             // 开启流程图支持，默认关闭
                sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/upload/uploadMarkDown",
                onload : function() {
                    console.log('onload', this);
                }
            });
	    	
	    	//初始化UE编辑器
	    	ueEditor = UE.getEditor('ue-editor');
	    });
	    
	    function changeEdit(){
	    	if(defaultEditor == "md"){
	    		$(".mdeditor").css("display","none");
	    		$(".ueeditor").css("display","block");
	    		defaultEditor = "ue"
	    	}else{
	    		$(".mdeditor").css("display","block");
	    		$(".ueeditor").css("display","none");
	    		defaultEditor = "md"
	    	}
	    	//改变编辑器
	    	$("#defaultEditor").val(defaultEditor);
	    }
	    
	    function validateForm(){
	    	if(defaultEditor == "md"){
	    		$("#mdContent").val(mdEditor.getMarkdown());
	    		$("#htmlContent").val(mdEditor.getHTML());
	    	}else{
	    		$("#htmlContent").val(ueEditor.getContent());
	    	}
	    	//console.log($("#content").val());
	    	return true;
	    }
    </script>
</body>
</html>
